<template>
  <div class="app-container">
    <header v-if="product_list.length">
      <p class="title">Play Anytime Anywhere</p>
      <img class="bgIcon" src="@/assets/home/bgsvg.png" alt="" />
    </header>
    <main>
      <div v-for="(item, index) in product_list" :key="index" class="game">
        <div @click="toGameItem(item)" class="image">
          <img v-lazy="item.images[0]" alt="" />
        </div>
        <div class="msg">
          <p class="name">{{ item.name }}</p>
          <p @click="toGameItem(item)" class="text">GET INTO</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { productList } from "@/api/product";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";

const route = useRoute();
const router = useRouter();

// 获取游戏列表
const product_list = ref([]);
const getProductList = () => {
  productList({
    category_id: [100288],
    page: 1,
    per_page: 12,
  }).then((res) => {
    product_list.value = res.data.data;
    // console.log(product_list.value);
  });
};
getProductList();

// 跳转游戏详情
const toGameItem = (item) => {
  router.push({
    path: "/gameItem",
    query: { id: item.id },
  });
};
</script>

<style lang="scss" scoped>
.app-container {
  margin-top: 60px;
  header {
    margin-bottom: 40px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100%;
    position: relative;
    .title {
      font-size: 60px;
      text-align: center;
      color: #bdbcbf;
    }
    .bgIcon {
      position: absolute;
      left: 180px;
    }
  }
  main {
    width: 100%;
    // grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    .game {
      padding: 0 20px;
      display: flex;
      align-items: center;
      // background: #161c26;
      background: #1f2635;
      .image {
        // width: 380px;
        // height: 240px;
        img {
          width: 100%;
          height: 100%;
          transition: transform 0.5s ease;
          cursor: pointer;
          &:hover {
            transform: scale(1.1);
          }
        }
        /* 遮罩层的基本样式 */
        .mask {
          position: absolute; /* 或者使用 absolute, 根据具体需求 */
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.2); /* 半透明黑色背景 */
          z-index: 1000; /* 确保遮罩层位于其他内容之上 */
          cursor: pointer;
        }
      }
      .msg {
        margin-left: 30px;
        .name {
          max-width: 260px;
          font-size: 14px;
          color: #fff;
        }
        .text {
          width: 100px;
          height: 50px;
          background: #ffa300;
          border-radius: 12px;
          text-align: center;
          line-height: 50px;
          margin-top: 20px;
          cursor: pointer;
          &:hover {
            color: #ffa300;
            background: #161c26;
            border: 1px solid #ffa300;
          }
        }
      }
    }
  }
}
</style>
